<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/base.min.css">
    <link rel="stylesheet" href="../css/Seatse.min.css">
    <link rel="stylesheet" href="../util/font_al/iconfont.css">
    <script src="../util/jQuery/jquery-3.5.1.min.js"></script>
    <script src="../js/seatse.js"></script>
    <script src="../js/adjust.js"></script>
    <title>选座</title>
</head>
<body>
    <div class="container">
        <!-- 头部布局 -->
        <header>
            <a class="iconfont icon-jiantou1" id="prev"></a>
            <span>选座</span>
        </header>
        <main>
            <div class="main-top">
                <img src="../images/Seatse/scro.png" alt="">
            </div>
            <div class="seatbox">
                <div class="seatb-m">
                    <!-- 左边 -->
                    <ul class="seat-l">
                       <li class="wx">A1</li>
                       <li class="wx">A2</li>
                       <li class="wx">A3</li>
                       <li class="wx">B1</li>
                       <li class="wx">B2</li>
                       <li class="wx">B3</li>
                       <li class="wx">C1</li>
                       <li class="wx">C2</li>
                       <li class="wx">C3</li>
                       <li class="wx">D1</li>
                       <li class="wx">D2</li>
                       <li class="wx">D3</li>
                       <li class="ys">E1</li>
                       <li class="ys">E2</li>
                       <li class="ys">E3</li>
                       <li class="ys">F1</li>
                       <li class="ys">F2</li>
                       <li class="ys">F3</li>
                    </ul>
                    <!-- 右边 -->
                    <ul class="seat-r">
                        <li class="wx">A4</li>
                        <li class="wx">A5</li>
                        <li class="wx">A6</li>
                        <li class="wx">B4</li>
                        <li class="wx">B5</li>
                        <li class="wx">B6</li>
                        <li class="wx">C4</li>
                        <li class="wx">C5</li>
                        <li class="wx">C6</li>
                        <li class="wx">D4</li>
                        <li class="wx">D5</li>
                        <li class="wx">D6</li>
                        <li class="ys">E4</li>
                        <li class="wx">E5</li>
                        <li class="wx">E6</li>
                        <li class="wx">F4</li>
                        <li class="wx">F5</li>
                        <li class="yx">F6</li>
                    </ul>
                </div>
                <div class="seatb-mb">
                    <ul>
                        <li>
                            <span style="background-color: transparent; border: 1px solid white;"></span>
                            <span>可选座位</span>
                        </li>
                       
                        <li>
                            <span style="background-color: #4074ff; border: 1px solid transparent;"></span>
                            <span>已选座位</span>
                        </li>
                        <li>
                            <span style="background-color: #e3e3e3; border: 1px solid white;"></span>
                            <span>已售座位</span>
                        </li>
                    </ul>

                </div>
            </div>
        </main>
        <footer>
            <div class="foot-bot">
                <div class="footb-m">
                    <div class="fotm-t">
                        <p>哥斯拉大战金刚</p>
                        <p>成都双楠电影城·2020-04-16星期一19:00</p>
                    </div>
                    <div class="fotm-m">
                        <ul>
                            <li>
                                <span>已选座位</span>
                                <span id="addSpan">
                                </span>
                            </li>
                            <li>
                                <span>总价</span>
                                <span>
                                    <span id="price">￥0.0</span>
                                </span>
                            </li>
                        </ul>
                       
                    </div>
                    <div class="fotm-b">
                        <a href="order.html">立即购票</a>
                    </div>
                </div>
            </div>

        </footer>

    </div>
</body>
</html>